<template>
    <p role="status" aria-live="assertive"></p>
    <div ref="elegantRender" id="elegant-render"></div>
</template>

<script setup lang="ts">
import {ref, onMounted, onUnmounted} from 'vue'
import { load, unload } from './loader'
import './modal/modalplugin.css'

const elegantRender = ref(null)

onMounted(() => load(elegantRender.value))
onUnmounted(() => unload())
</script>

<style scoped>
#elegant-render {
    width: 100vw;  /* 或者使用 calc(100%) 单独的 100% 受父级元素影响可能失效 */
    height: 100vh;
    margin: 0 10px;
}

p[role=status] {
    opacity: 0;
}
</style>